<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        html, body{
            background-color: #ccc;
        }
        h1{
            padding-left: 100px;
            background-color: #000;
            color: #fff;
            line-height: 60px;
        }
        .home-dev{
            width: 200px;
            display: flex;
            flex-wrap: wrap;
            margin-top: 30px;
            padding: 15px 5px;
            margin-left: 30px;
            background-color: #fff;
            color: #999;
            font-weight: bold;
            border-radius: 10px;
            cursor: pointer;
            float: left;
        }
        .home-dev div{
            width: 100%;
            line-height: 40px;
            padding-left: 25px;
        }
        .home-dev div ul{
            padding-left: 30px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>极简插件</h1>
        <home-dev></home-dev>
        
        <router-view></router-view>
    </div>

    <template id="home-dev">
        <div class="home-dev">
            <div @click="goHome">
                <p>首页</p>
            </div>
            <div>
                <p>插件</p>
            </div>
            <div>
                <ul>
                    <li @click="go1">1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
                    <li>10</li>
                </ul>
            </div>
            <div>
                <p>教程</p>
            </div>
            <div>
                <p>关于</p>
            </div>
        </div>
    </template>

    <template id="home">
        <div>
            <h3>这是home</h3>
        </div>
    </template>
    <template id="unit">
        <div>
            <h3>这是1</h3>
        </div>
    </template>

    <script src="../lib/Vue/vue.js"></script>
    <script src="../lib/Vue/vue-router.js"></script>
    <script>

        const router = new VueRouter({
            routes: [
                {
                    path: '/',
                    redirect: '/home'
                },
                {
                    path: '/home',
                    component: {
                        template: '#home'
                    }
                },
                {
                    path: '/unit',
                    component: {
                        template: '#unit'
                    }
                }
            ]
        })

        var vm =  new Vue({
            el: '#app',
            components: {
                'home-dev': { // 导航头部
                    template: '#home-dev',
                    methods: {
                        goHome() {
                            console.log('我是gohome');
                            router.push('/home')
                        },
                        go1() {
                            console.log('我是go1');
                            router.push('/unit')
                        }
                    },
                }
            },
            router
        })
    </script>
</body>
</html>